<template>
  <view class="describe-card-container" :style="{padding: `10rpx ${padding}rpx;`}" >
      <view class="describe-card-content" :style="{backgroundColor:colors[color]['bgColor']}">
        <view class="card-header-title" >
        <text class="title" :style="{backgroundColor:colors[color]['tagColor']}">{{ title }}</text>
        </view>
        <view class="card-body">
            <slot></slot>
        </view>
      </view>
  </view>
</template>

<script>
const colors = {
  blue: { tagColor: "#0ecffe", bgColor: "#e3f3f7" },
  red: { tagColor: "#ff774d", bgColor: "#fef3ee" },
};

export default {
  props: {
    color: {
      type: String,
      default: 'blue',
    },
    title: {
      type: String,
      default: "描述",
    },
    padding:{
        type: Number,
        default: 30,
    }
  },
  data() {
    return {
        colors:colors
    };
  },
};
</script>

<style lang="scss" scoped>
.describe-card-container {
    
    .describe-card-content{
        width: 100%;
        border-radius: 15rpx;
    }
  & .card-header-title>.title {
    font-size: 24rpx;
    padding: 0 5rpx;
    color: white;
    border-radius: 8rpx;
  }


  & .card-body{
      padding: 10rpx;
      font-size: 22rpx;
      color: rgb(121, 121, 121);
      line-height: 30rpx;
  }
}
</style>
